<template>
    <div class="cloud-space" @click="outClick">
        <div class="menu-box">
            <div class="company-box">
                <head-icon class="fl company-icon" size="42px" :img="currentCompany.logo" :name="currentCompany.name"
                           :border="null" :status="true"></head-icon>
                <div class="fl info-content relative" @click.stop="showSelect">
                    <p class="name pointer" v-text="currentCompany.name" :title="currentCompany.name"></p>
                    <i class="drop-down-icon icon-rebuild"> </i>
                    <capacity-article :used="used" :capacity="capacity" class="size-box"></capacity-article>
                </div>
                <div class="company-select" v-show="showCompanySelect" ref="companySelect">
                    <div class="title">
                        <h1 class="fl label">切换公司</h1>
                        <a class="fr pointer">···</a>
                    </div>
                    <ul>
                        <li v-for="(company,key) in companyList" :key="key" class="pointer"
                            @click.stop="changeCompany(company)">
                            <head-icon class="fl logo" size="30px" :img="company.logo" :name="company.name"
                                       :border="null" :status="true"></head-icon>
                            <p class="name" v-text="company.name"></p>
                            <img class="choose-icon fr" v-if="company.companyId === currentCompany.companyId"
                                 src="@/assets/icon/choose_icon.png">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="menu-list">
                <ul>
                    <li class="text-center relative dept-list-box" style="padding:0">
                        <menu-button class="dept-name hover" :clickFun="getDeptList"
                                     :class="checkCurrentPath('detail/0?deptId=0')"
                                     content="企业文件" imgPosition="0 0"></menu-button>
                        <i class="drop-down-icon"
                           :class="currentCompany.showChildren? 'drop-down-icon-rotate' :'drop-down-icon-rotate-back'"> </i>
                        <ul v-if="currentCompany.showChildren ">
                            <organization :status="true" v-for="(dept,key) in currentCompany.children"
                                          :key="key" :dept="dept" :clickFun="chooseDept"></organization>
                        </ul>
                    </li>
                    <li class="text-center hover" :class="checkCurrentPath('detail/1')" @click="goToPage('detail/1')">
                        <menu-button content="个人文件" imgPosition="0 -38px"></menu-button>
                    </li>
                    <li class="text-center hover" :class="checkCurrentPath('detail/2')" @click="goToPage('detail/2')">
                        <menu-button content="与我协作" imgPosition="0 -76px"></menu-button>
                    </li>
                    <li class="text-center hover" :class="checkCurrentPath('detail/3')" @click="goToPage('detail/3')">
                        <menu-button content="我的关注" imgPosition="0 -191px"></menu-button>
                    </li>
                    <li class="text-center hover" :class="checkCurrentPath('shareFiles')"
                        @click="goToPage('shareFiles')">
                        <menu-button content="我的分享" imgPosition="0 -114px"></menu-button>
                    </li>
                    <li class="text-center hover" :class="checkCurrentPath('recycleBin')"
                        @click="goToPage('recycleBin')">
                        <menu-button content="回收站" imgPosition="0 -228px"></menu-button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content-box">
            <router-view class="content" :companyId="currentCompany.companyId"></router-view>
        </div>
        <explain v-if="showExplain" :message="message" @notAgain="alertNotAgain"></explain>
    </div>
</template>

<script>
  import MenuButton from '@/components/MenuButton.vue'
  import HeadIcon from '@/components/HeadIcon.vue'
  import Organization from '@/components/Organization.vue'
  import CapacityArticle from '@/components/CapacityArticle.vue'
  import Explain from '@/components/Explain.vue'
  import Cookie from 'js-cookie';

  export default {
    name: "cloudSpace",
    components: {
      MenuButton,
      HeadIcon,
      Organization,
      CapacityArticle,
      Explain
    },
    data() {
      return {
        showCompanySelect: false,
        userInfo: {},
        currentCompany: {},
        companyList: [],
        capacity: 0,
        used: 0,
        showExplain: false,
        message: '企业文件内新建文件夹，默认仅组织管理员和您可见可通过邀请协作人让其他人可见'
      }
    },
    mounted() {
      this.userInfo = JSON.parse(JSON.stringify(this.$store.state.user.userInfo))
      if (!this.userInfo.userId) {
        this.getUserInfo()
      } else {
        this.initPage()
      }
    },
    methods: {
      initPage: function () {
        let companyId = Cookie.get('__cid__', 'ddbes.com')
        if (this.$store.state.company.companyInfo.name) {
          this.currentCompany = this.publicFun.deepClone(this.$store.state.company.companyInfo)
          this.getUserAllOrganization()
        } else {
          if (!companyId || companyId === '') {
            companyId = this.userInfo.companyId
          }
          this.getCompanyOrganization(companyId)
        }
      },
      getUserInfo: function () {
        const that = this
        this.$http.get('/user/user/info').then(function (data) {
          if (data.data.code === 1) {
                that.$store.commit('setUserInfo', data.data.data)
            that.userInfo = data.data.data
            that.initPage()
          }
        })
      },

      resetUserCompany: function (companyInfo) {
        const that = this
        this.$http.post('/user/user/upUser', {
          companyId: companyInfo.companyId,
        }).then(function (data) {
          that.currentCompany = companyInfo
          const userName = localStorage.getItem('current_user')
          localStorage.setItem(userName + '_info', JSON.stringify(data.data.data))
          that.$store.commit('setUserInfo', data.data.data)
          that.$store.commit('setCompanyInfo', companyInfo)
          that.userInfo = data.data.data
          that.getCompanyUsed()
        })
      },

      outClick: function (event) {
        if (!this.$refs.companySelect.contains(event.target)) {
          this.showCompanySelect = false
        }
      },
      showSelect: function () {
        this.showCompanySelect = !this.showCompanySelect
      },
      changeCompany: function (companyInfo) {
        this.showCompanySelect = false
        if (this.currentCompany.companyId !== companyInfo.companyId) {
          Cookie.set('__cid__', companyInfo.companyId, {domain: 'ddbes.com'});
          this.resetUserCompany(companyInfo)
        }
      },

      alertNotAgain: function (status) {
        if (status) {
          localStorage.setItem('companyfileHomeAlert', true)
        } else {
          localStorage.removeItem('companyfileHomeAlert')
        }
      },
      checkCurrentPath: function (path) {
        if (this.$route.fullPath.indexOf(path) > -1) {
          return 'menu-active'
        } else {
          return ''
        }
      },
      goToPage: function (path, namePath) {
        if (this.$route.fullPath.indexOf('/cloudSpace/' + path) === -1) {
          let pushUrl = '/cloudSpace/' + path
          if (namePath) {
            pushUrl = pushUrl + namePath
          }
          this.$router.push({
            path: pushUrl,
            meta: {currentTime: new Date().getTime()}
          })
        }
      },
      getCompanyOrganization: function (companyId) {
        const that = this
        this.$http.get('/organization/company/' + companyId).then(function (data) {
          if (data.data.code === 1) {
            that.currentCompany = that.publicFun.deepClone(data.data.data)
            that.$store.commit('setCompanyInfo', data.data.data)
            that.getUserAllOrganization()
            if(companyId == that.userInfo.companyId){
              that.getCompanyUsed()
            }else{
              that.resetUserCompany(data.data.data)
            }
          }
        })
      },
      getUserAllOrganization: function () {
        const that = this
        this.$http.get('/organization/company/user/' + this.userInfo.userId).then(function (data) {
          if (data.data.code === 1) {
            that.companyList = data.data.data
          }
        })
      },
      chooseDept: function (dept, status) {
        const that = this
        const name = dept.companyFolderName ? dept.companyFolderName : dept.name
        this.goToPage('detail/0?deptId=' + (status ? 0 : dept.deptId), '&name=' + name)
        if (dept.showChildren) {
          return this.$set(dept, 'showChildren', false)
        } else if (dept.children && dept.children.length > 0) {
          return this.$set(dept, 'showChildren', true)
        }
        this.$http.get('/organization/company/dept/' + this.userInfo.companyId + '/' + dept.deptId).then(function (data) {
          if (data.data.code === 1) {
            that.$set(dept, 'showChildren', true)
            that.$set(dept, 'children', data.data.data.branchList)
            if (data.data.data.branchList.length === 0) {
              that.$set(dept, 'childernNotExist', true)
            } else {
              that.$set(dept, 'childernNotExist', false)
            }
          }
        })
      },

      getCompanyUsed: function () {
        const that = this
        this.$http.get('/pan/file/capacity/v1').then(function (data) {
          if (data.data.code === 1) {
            that.capacity = data.data.data.capacity
            that.used = data.data.data.used
            that.$store.commit('setCapacity', data.data.data)
          }
        })
      },
      getDeptList: function () {
        this.currentCompany.companyFolderName = '企业文件'
        this.chooseDept(this.currentCompany, true)
        const isNotAgain = localStorage.getItem('companyfileHomeAlert')
        if (!isNotAgain) {
          this.showExplain = true
        }
      }

    }
  }
</script>

<style scoped lang="css" src="@/assets/css/content-menu.css">

</style>

<style scoped>
    .dept-list-box {
        max-height: calc(100vh - 400px);
        overflow: auto;
    }

    .company-box {
        height: 94px;
        margin: 10px 10px 20px 10px;
        border-bottom: 1px solid #CDCEDF;
        position: relative;
    }

    .company-box .company-select {
        width: 250px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 7px 0 rgba(4, 0, 0, 0.1);
        border-radius: 4px;
        position: absolute;
        z-index: 20;
        left: -15px;
        top: 80px;
    }

    .company-box .company-select .title {
        height: 41px;
        border-bottom: solid rgba(244, 244, 244, 1) 1px;
    }

    .company-box .company-select .title a {
        margin-right: 15px;
        line-height: 40px;
        letter-spacing: -3px;
    }

    .company-box .company-select .choose-icon {
        height: 22px;
        width: 22px;
        float: right;
        margin: 15px 12px 0 0;
    }

    .company-box .company-select ul {
        min-height: 48px;
        padding: 5px 0;
    }

    .company-box .company-select ul li {
        height: 48px;
    }

    .company-box .company-select ul li:hover {
        background: rgba(247, 250, 252, 1);

    }

    .company-box .company-select ul li .icon {
        height: 16px;
        width: 16px;
    }

    .company-box .company-select ul li .logo {
        margin: 9px 15px;
        float: left;
    }

    .company-box .company-select ul li .name {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 48px;
        float: left;
    }

    .company-box .company-select .label {
        font-size: 12px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 40px;
        padding-left: 12px;
    }

    .company-box .info-content {
        margin-top: 23px;
        margin-left: 6px;
        width: 160px;
    }

    .company-box .company-icon {
        margin: 28px 5px 0;
    }

    .company-box .name {
        line-height: 20px;
        font-size: 14px;
        color: #333333;
        letter-spacing: 1px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 145px;
        font-weight: bold;
    }

    .company-box .size-box {
        margin-top: 6px;
    }

    .company-box .icon-rebuild {
        right: 0px;
        top: 6px;
    }

    .dept-name {
        position: relative;
        padding-left: 20px;
    }


    @keyframes step {
        0% {
            left: 112px;
        }
        20% {
            left: 108px;
        }
        40% {
            left: 112px;
        }
        60% {
            left: 108px;
        }
        80% {
            left: 112px;
        }
        100% {
            left: 110px;
        }
    }

    .red-point {
        position: absolute;
        animation: step .4s;
        background: red;
        height: 7px;
        width: 7px;
        left: 110px;
        top: 10px;
        border-radius: 50%;
    }

</style>
